<template>
  <div>
    <Row class="container">
      <div class="signup-img-box">
        <img src="../../static/img/bg.jpg" alt="">
      </div>
      <i-col span="8" offset="8">
        <div class="sign-up-title">
          <h1>欢 迎 注 册 </h1>
          <br>
        </div>
        <div class="sing-up-step-box" :style="changeSignup">
            <Steps :current="signUpStep">
              <Step title="填写账号信息" icon="person-add"></Step>
              <Step title="注册成功" icon="ios-checkmark-outline"></Step>
            </Steps>
          <div class="sign-up-box" >
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'SignUp',
  data () {
    return {
      index: 0
    };
  },
  computed: {
    ...mapState(['signUpStep']),
    changeSignup(){
      console.log(this.$route.path);
      if(this.$route.path==='/SignUp/signUpDone') {
        return 'height:310px'
      }
    }
  },

  methods: {
    ...mapMutations(['SET_SIGN_UP_SETP'])
  },
  store,
  mounted () {
    this.SET_SIGN_UP_SETP(0);
  }
};
</script>

<style scoped>
.container {
  height: 100%;
}
.signup-img-box {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  position: fixed;
}
.signup-img-box>img {
  width: 100%;
}

.sign-up-title {
  font-size: 2em;
  width: 430px;
  margin: 15px auto;
  height: 80px;
  text-align: center;
  text-shadow: 2px 3px 5px #363131;
  color: #ffffff;
}
.sing-up-step-box {
  margin: 15px auto;
  padding-top: 12px;
  padding-bottom: 10px;
  height: auto;
  border-radius: 10px;
  border: 2px solid #e2e2e2;
  background-color: rgb(255,255,255);
}
.sing-up-step-box>>>div.ivu-steps-horizontal {
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
.sing-up-step-box>>>div.ivu-steps-item {
  width: 40% !important;
}

.sign-up-box {
  margin-top: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  padding-right: 15px;
}
</style>
